<template>
  <wd-action-sheet v-model="show" :title="title" @close="close">
    <view class="form-container">
      <slot />
      <button class="sheet-add-btn" :disabled="disabled" @click="submit">
        <wd-loading v-if="submitLoading" size="18" color="#222" /> 确定
      </button>
      <button v-if="showRemove" class="sheet-more-btn" :disabled="disabled" @click="remove">
        <wd-loading v-if="removeLoading" size="18" color="red" />删除
      </button>
    </view>
  </wd-action-sheet>
</template>

<script lang="ts" setup>
// #region Props
defineProps<{ title: string, showRemove?: boolean }>()
// #endregion
// #region Emits
const emits = defineEmits(['submit', 'close', 'remove'])
const show = defineModel<boolean>()
const submitLoading = ref(false)
const removeLoading = ref(false)
// #endregion
// #region Hooks
// #endregion
// #region Computed
const disabled = computed(() => submitLoading.value || removeLoading.value)
// #endregion
// #region Watch
// #endregion
// #region Event
// #endregion
// #region Function
function close() {
  submitLoading.value = false
  removeLoading.value = false
  emits('close')
}

function submit() {
  submitLoading.value = true
  emits('submit', () => {
    submitLoading.value = false
  })
}

function remove() {
  removeLoading.value = true
  emits('remove', () => {
    removeLoading.value = false
  })
}
// #endregion
// #region Life Cycle
// #endregion
// #region Expose
// #endregion
</script>

<style lang="scss" scoped>
.form-container {
  margin: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  :deep(.wd-icon) {
    display: none !important;
  }
  :deep(.wd-radio) {
    &.is-checked {
      .wd-radio__label {
        background: #84b20f !important;
        color: #fff !important;
        padding: 5 10px !important;
      }
    }
  }
  :deep(.wd-checkbox-group) {
    display: flex !important;
    padding: 0 !important;
    gap: 10px;
    .wd-checkbox {
      padding: 0 !important;
      width: unset !important;
      .wd-checkbox__label {
        border: none !important;
        min-width: unset !important;
      }
      &.is-checked {
        .wd-checkbox__label {
          background: #84b20f !important;
          color: #fff !important;
          padding: 5 10px !important;
        }
      }
    }
  }
  :deep(slider) {
    margin: 0 !important;
  }
  .sheet-add-btn {
    height: 60px;
    background: var(--button-color);
    border-radius: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    display: flex;
    gap: 10px;
  }
  .sheet-more-btn {
    background: none;
    border-radius: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    display: flex;
    border: none;
    color: var(--color-red);
    gap: 10px;
  }
}
</style>
